<div class="clearfix">
	<ul class="nav pull-left">			
		<li class="pull-left" >{:L('TO_FIND_THE_CONDITIONS')}
			<select style="width:auto" id="fields" onchange="changeCondition()" name="field">
            <option class="" value="">--{:L('SELECT_THE_FILTER')}--</option>
				<volist name="field_array" id="v">
					<if condition="$i lt 4">
                    <option class="{$v['form_type']}" value="{$v[field]}">{$v[name]}</option>
					</if>
                </volist>
				<option class="role" value="owner_role_id">{:L('PRINCIPAL')}</option>
				<option class="date" value="create_time">{:L('CREATION_TIME')}</option>
				<option class="date" value="update_time">{:L('MODIFICATION_TIME')}</option>
			</select>&nbsp;&nbsp;
		</li>
		<li id="conditionContent" class="pull-left">
			<select id="conditions" style="width:auto" name="condition" onchange="changeSearch()">
				<option value="contains">{:L('INCLUDE')}</option>
				<option value="not_contain">{:L('EXCLUSIVE')}</option>
				<option value="is">{:L('YES')}</option>
				<option value="isnot">{:L('ISNOT')}</option>						
				<option value="start_with">{:L('BEGINNING_CHARACTER')}</option>
				<option value="end_with">{:L('TERMINATION_CHARACTER')}</option>
				<option value="is_empty">{:L('MANDATORY')}</option>
				<option value="is_not_empty">{:L('ISNOTEMPTY')}</option>
			</select>&nbsp;&nbsp;
		</li>
		<li id="searchContent" class="pull-left">
			<input id="searchs" type="text" class="input-medium search-query" name="search"/>&nbsp;&nbsp;
		</li>
		<li class="pull-left">
			<button class="btn" onclick="d_changeCondition(0)">{:L('SEARCH')}</button>
		</li>
		&nbsp;<a target="_blank" href="{:U('customer/add')}">{:L('CREATE_NEW_CUSTOMER')}</a>
	</ul>
</div>
<empty name="customerList">
	<div class="alert">{:L('TEMPORARILY_NO_DATA')}</div>
<else/>
<table class="table table-hover">
	<thead>
		<tr>
			<th>&nbsp;</th>
            <volist name="field_array" id="v">
				<if condition="$i lt 4">
					<th>{$v[name]|default='&nbsp;'}</th>
				</if>
            </volist>
		</tr>
	</thead>
	<tfoot id="footers">
		<tr>
			<td colspan="{$field_num}">
				<div class="row pagination">
					<div class="span2"><span id="counts">{$count_num}</span> {:L('RECORDS')} <span id="ps">1</span>/<span id="total_pages">{$total}</span> {:L('PAGE')}</div>
					<div class="span4">
						<div><ul id="changepages">
							<li><span class='current'>{:L('FIRST_PAGE')}</span></li><li><span>« {:L('THE_PREVIOUS_PAGE')}</span></li>
							<if condition="1 lt $total">
								<li><a class="page" href="javascript:void(0)" rel="2">{:L('THE_NEXT_PAGE')} »</a></li>
							<else />
								<li><span>{:L('THE_NEXT_PAGE')} »</span></li>
							</if>
						</ul></div>
					</div>
				</div>
			</td>
		</tr>
	</tfoot>
	<tbody id="loads" class="hide">
		<tr><td class="tdleft" <if condition="C('ismobile') neq 1">colspan="6"<else />colspan="4"</if> style=" height:300px;text-align:center"><img src="./Public/img/load.gif"></td></tr>
	</tbody>
	<tbody id="datas">
		<volist name="customerList" id="vo">
			<tr>
				<td>
					<input type="radio" name="customer" value="{$vo.customer_id}" rel="{$vo.contacts_id}" />
					<input type="hidden" name="contacts_name" value="{$vo.contacts_name}" />
				</td>
                <volist name="field_array" id="v">
					<if condition="$i lt 4">
					<td>{$vo[$v['field']]}</td>
					</if>
                </volist>
			</tr>
		</volist>
	</tbody>
</table>
</empty>
<script type="text/javascript">
	$('.page').click(function(){
		var a = $(this).attr('rel');
		d_changeCondition(a);
	});
	function d_changeCondition(p){
		$('#datas').addClass('hide');
		$('#loads').removeClass('hide');
		
		var field = $('#fields').val();
		var condition = $('#conditions').val();
		var asearch = encodeURI($("#searchs").val());
		$.ajax({
			type:'get',
			url:'index.php?m=customer&a=changecontent&field='+field+'&search='+asearch+'&condition='+condition+'&p='+p<if condition="$customer_id">+"&customer_id={$customer_id}"</if>,
			async:false,
			success:function(data){			
				var temp = '';
				if(data.data.list != null){
					$.each(data.data.list, function(k, v){
						temp += "<tr><td><input type='radio' name='customer' value='"+v.customer_id+"'/><input type='hidden' name='contacts_name' value='"+v.contacts_name+"'/></td>";
                        <volist name="field_array" id="v">
						<if condition="$i lt 4">
                        temp +=  "<td>" + v.{$v[field]} + "</td>";
						</if>
                        </volist>
                        temp +=  "</tr>";
					});
					var changepage = "";
					if(data.data.p == 1){
						changepage = "<li><span class='current'>{:L('FIRST_PAGE')}</span></li><li><span>« {:L('THE_PREVIOUS_PAGE')}</span></li>";
						if(data.data.p < data.data.total){
							changepage += "<li><a class='page' href='javascript:void(0)' rel='"+(data.data.p+1)+"'>{:L('THE_NEXT_PAGE')} »</a></li>";
						}else{
							changepage += "<li><span>{:L('THE_NEXT_PAGE')} »</span></li>";
						}
					}else if(data.data.p == data.data.total){
						changepage = "<li><a class='page' href='javascript:void(0)' rel='1'>{:L('FIRST_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p-1)+"'>« {:L('THE_PREVIOUS_PAGE')}</a></li><li><span>{:L('THE_NEXT_PAGE')} »</span></li>";
					}else{
						changepage = "<li><a class='page' href='javascript:void(0)' rel='1'>{:L('FIRST_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p-1)+"'>« {:L('THE_PREVIOUS_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p+1)+"'>{:L('THE_NEXT_PAGE')} »</a></li>";
					}				
					$('#ps').html(data.data.p);
					$('#changepages').html(changepage);
					$('#counts').html(data.data.count);
					$('#total_pages').html(data.data.total);				
					$('#datas').html(temp);
					$('.page').click(function(){
						var a = $(this).attr('rel');
						d_changeCondition(a);
					});
				}else{
					$('#datas').html('<tr><td colspan="4">{:L('DO_NOT_FIND_THE_RESULTS_YOU_WANT')}</tr>');
					$('#footers').addClass('hide');
				}
				$('#loads').addClass('hide');
				$('#datas').removeClass('hide');
			},
			dataType:'json'
		});		
	}
</script>